$(function() {
	$("#jqGrid").jqGrid({
		url: baseURL + 'user/list',
		datatype: "json",
		colModel: [
			{label: '用户ID', name: 'id', width: 40},
			{label: '电话', name: 'phone', width: 40},
		],
		viewrecords: true,
		height: 385,
		rowNum: 10,
		rowList: [10, 30, 50],
		rownumbers: true,
		rownumWidth: 25,
		autowidth: true,
		multiselect: true,
		pager: "#jqGridPager",
		jsonReader: {
			root: "page.list",
			page: "page.currPage",
			total: "page.totalPage",
			records: "page.totalCount"
		},
		prmNames: {
			page:"page",
			rows:"limit",
			order:"order",
		},
		gridComplete: function() {
			// 隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
		}
	});
});

var vm = new Vue({
	el: '#rrapp',
	data: {
		q: {
			phone: null
		},
		showList: true
	},
	methods: {
		query: function() {
			vm.reload();
		},
		reload: function () {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
                postData:{'phone': vm.q.phone},
                page:page
            }).trigger("reloadGrid");
		}
		
	}
})